<template>
  <div class="container">
    <div ref="screenRef" class="screen">
      <header class="top">
        <HeadTop></HeadTop>
      </header>
      <div class="bottom">
        <div class="left common">
          <LeftContent></LeftContent>
        </div>
        <div class="center">
          <CenterContent></CenterContent>
        </div>
        <div class="right common">
          <RightContent></RightContent>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { usedataScreen } from './share'
import { provide } from 'vue'

import HeadTop from './components/headTop.vue'
import LeftContent from './components/leftContent.vue'
import RightContent from './components/rightContent.vue'
import CenterContent from './components/centerContent.vue'

const { screenRef, groupData } = usedataScreen()
provide('groupData', groupData)
</script>
<style scoped lang="less">
.container {
  height: 100vh;
  background-size: cover;
  .screen {
    position: fixed;
    width: 3840px;
    height: 1512px;
    left: 50%;
    top: 50%;
    background: url(@/assets/images/base-img.png) no-repeat;
    background-size: cover;
    transform-origin: left top;
    .top {
      height: 118px;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      height: 1394px;

      .center {
        flex: 1;
        position: relative;
        overflow: hidden;
        background-color: rgba(0, 15, 43, 0.2);
      }

      .center::after {
        content: '';
        width: 2101px;
        height: 582px;
        margin: 0 auto;
        position: absolute;
        bottom: -444px;
        left: -160px;
        transition: translateX(50%);
        background-image: linear-gradient(
          270deg,
          #02113387 97%,
          #02113396 55%,
          #000f2b 0%
        );
        box-shadow: inset 0px -100.8px 214.2px 0px #007effdb;
        border-radius: 50%;
        border: 3px solid #0d4671;
        opacity: 1;
      }

      .common {
        width: 993px;
        height: 1390px;
        position: relative; /* 为了正确定位伪元素 */
        overflow: hidden; /* 确保伪元素不会溢出 */
      }

      /* 内凹样式 */
      .left {
        position: relative;
        background: linear-gradient(
          90deg,
          #000f2b 0%,
          #02113396 55%,
          #02113387 97%
        );
        &::after {
          content: '';
          position: absolute;
          right: -85px;
          top: 0;
          width: 170px;
          height: 100%;
          z-index: 0;
          background-size: cover;
          background-position: top center;
          border: 3px dashed transparent;
          opacity: 0.5;
          border-radius: 50%;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          background-image: url(@/assets/images/base-img.png),
            linear-gradient(
              180deg,
              rgba(46, 227, 255, 0) 1%,
              rgba(46, 227, 255, 1) 47%,
              rgba(46, 227, 255, 0) 100%
            );
        }
      }

      .right {
        padding-left: 70px;
        background-image: linear-gradient(
          270deg,
          #000f2b 0%,
          #02113396 55%,
          #02113387 97%
        );
        box-shadow: inset -8.4px 0 56px 0 #1a90ff3f; /* 右边的阴影 */
        &::after {
          content: '';
          position: absolute;
          left: -85px;
          top: 0;
          width: 170px;
          height: 100%;
          border-radius: 50%;
          z-index: 0;
          opacity: 0.5;
          border: 3px dashed transparent;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          background-image: url(@/assets/images/base-img.png),
            linear-gradient(
              180deg,
              rgba(46, 227, 255, 0) 1%,
              rgba(46, 227, 255, 1) 47%,
              rgba(46, 227, 255, 0) 100%
            );
          background-size: cover;
          background-position: right center;
        }
      }
    }
  }
}
</style>
